﻿<!DOCTYPE html>
<html>

<head id="Head1" runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>批产计划</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="Shortcut Icon" href="../images/tempoBI.ico" type="image/x-icon" />
  <link rel="stylesheet" href="../StaticFiles/layui/dist/css/layui.css" />
  <link rel="stylesheet" href="../styles/pace.css" />
  <script type="text/javascript" src="../Scripts/pace.min.js"></script>
  <link rel="stylesheet" href="../StaticFiles/layui/admin.css" />
  <script type="text/javascript" src="../Scripts/json2.js"></script>
  <script type="text/javascript" src="../Scripts/jquery-1.11.2.min.js"></script>
  <style type="text/css">
    html {
      background-image: url(../images/bg.jpg);
      background-repeat: no-repeat;
    }

    #header {
      height: 60px;
      background-image: url(../images/抬头.png);
      background-size: 100% 60px;
      background-repeat: no-repeat;
      color: #fff;
      font-weight: bold;
      text-align: center;
      font-size: 28px;
      line-height: 60px;
    }

    #title {
      color: #fff;
      font-family: '微软雅黑';
      font-size: 20px;
      font-weight: bold;
      height: 32px;
      line-height: 32px;
    }

    .layui-card {
      background-color: transparent;
      border: 1px dashed #1E9FFF;
    }

    .layui-card-header {
      color: #fff;
      border: none;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 0.1em;
    }

    /*左上图片*/
    .bg-left-top {
      position: absolute;
      left: -2px;
      top: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/left-top.png);
    }

    /*左下图片*/
    .bg-left-bottom {
      position: absolute;
      left: -2px;
      bottom: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/left-bottom.png);
    }

    /*右上图片*/
    .bg-right-top {
      position: absolute;
      right: -2px;
      top: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/right-top.png);
    }

    /*右下图片*/
    .bg-right-bottom {
      position: absolute;
      bottom: -2px;
      right: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/right-bottom.png);
    }

    .lable {
      display: inline-block;
      color: #fff;
      font-size: 20px;
      height: 30px;
      line-height: 30px;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="layui-row" style="padding: 0 15px;">
    <div class="layui-col-md12">
      <div id="header">
        批产计划
      </div>
    </div>
  </div>

  <div class="layui-row" style="padding: 0 15px;">
    <div class="layui-col-md12">
      <div style="height:30px;">
        <span class="lable" style="color:#3cb0ff;">本年总计划数:</span>
        <span class="lable" style="color:#3cb0ff;margin-right:20px;" id="total"></span>
        <span class="lable" style="color:#00ff00;">本年已完工数:</span>
        <span class="lable" style="color:#00ff00;margin-right:20px;" id="finished"></span>
      </div>
    </div>
  </div>

  <div class="layui-fluid" style="padding-bottom: 0px;">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">
            <div class="bg-left-top">
            </div>
            <div class="bg-right-top">
            </div>
            <img src="../images/工作中心.png" height="20" alt="" />
            批产（含大修、检修、备件）各机型完成情况
          </div>
          <div class="layui-card-body">
            <div id="productfamilyname" style="height: 380px;">
            </div>
            <div class="bg-left-bottom">
            </div>
            <div class="bg-right-bottom">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="layui-fluid" style="padding-bottom: 0px;">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">
            <div class="bg-left-top">
            </div>
            <div class="bg-right-top">
            </div>
            <img src="../images/工作中心.png" height="20" alt="" />
            批产月计划执行情况
          </div>
          <div class="layui-card-body">
            <div id="pichanMonth" style="height: 400px;">
            </div>
            <div class="bg-left-bottom">
            </div>
            <div class="bg-right-bottom">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="../Scripts/echarts/echarts-5.4.0.min.js"></script>
  <script type="text/javascript" src="../StaticFiles/layui/dist/layui.js"></script>
  <script type="text/javascript">
    $(function () {

      $(".layui-card:last-child").css({ "marginBottom": "0px" });
      function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
      };

      var $factoryid = getUrlParam('factoryid');

      var month = decodeURIComponent(layui.url().search.month);
      var type = decodeURIComponent(layui.url().search.type);

      //查询本年计划总数及完成数
      function GetTotal() {
        $.ajax({
          type: "POST",
          url: "../handler/board/ZSPichanYear.ashx",
          dataType: "text",
          cashe: false,
          data: {
            type: 'GetTotalData'
          },
          beforeSend: function () {

          },
          success: function (result) {
            var data = JSON.parse(result);

            $("#total").text(data[0]["PLANQTY"] + '台');
            $("#finished").text(data[0]["FINISHQTY"] + '台');

          }
        });
      }
      GetTotal();

      //批产（含大修、检修、备件）各机型完成情况
      function GetProductfamilyData() {
        $.ajax({
          type: "POST",
          url: "../handler/board/ZSPichanYear.ashx",
          dataType: "text",
          cashe: false,
          data: {
            type: 'GetProductfamilyData'
          },
          beforeSend: function () {
            echarts.dispose(document.getElementById("productfamilyname"));
            var chart = echarts.init(document.getElementById('productfamilyname'));
            chart.showLoading({
              text: '数据查询中...',
              effect: 'whirling',
              maskColor: 'transparent',
              textColor: '#ffffff'
            });
          },
          success: function (result) {
            var data = JSON.parse(result);

            echarts.dispose(document.getElementById("productfamilyname"));
            var chart = echarts.init(document.getElementById('productfamilyname'));
            chart.hideLoading();

            var arrWorkcentername = [];
            var arrPlanValue = [];
            var arrActualValue = [];
            var arrNotFinish = [];

            for (var i = 0; i < data.length; i++) {
              arrWorkcentername.push(data[i]["PRODUCTFAMILYNAME"]);
              arrPlanValue.push(data[i]["PLANQTY"]);
              arrActualValue.push(data[i]["FINISHQTY"]);
              arrNotFinish.push(data[i]["NOTFINISHQTY"]);
            };

            var option = {
              tooltip: {
                trigger: 'axis',
                show: true,
                axisPointer: {
                  type: 'shadow'
                }
              },
              grid: {
                left: '1%',
                right: '1%',
                bottom: '5%',
                containLabel: true
              },
              legend: {
                data: ['计划数', '完工数', '未完工数'],
                x: '10',
                y: '0',
                textStyle: {
                  fontSize: '12',
                  fontWeight: 'bold',
                  color: '#fff'
                }
              },
              color: ['rgb(60,176,244)', 'rgb(0,255,0)', 'rgb(255,0,0)'],
              xAxis: [{
                type: 'category',
                axisTick: {
                  alignWithLabel: true
                },
                axisLine: {
                  lineStyle: {
                    color: '#fff',
                    width: '2'
                  }
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: '#fff',
                    fontSize: '14',
                    fontWeight: 'bold'
                  }
                },
                data: arrWorkcentername
              }],
              yAxis: [{
                type: 'value',
                axisLine: {
                  lineStyle: {
                    color: '#fff',
                    width: '2'
                  }
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: '#fff',
                    fontSize: '14',
                    fontWeight: 'bold'
                  }
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: '#999',
                    type: 'dashed'
                  }
                }
              }],
              series: [{
                name: '计划数',
                type: 'bar',
                barMaxWidth: 30,
                data: arrPlanValue,
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      position: 'top',
                      fontSize: '14',
                      fontWeight: 'bold'
                    },
                    barBorderRadius: [5, 5, 0, 0]
                  }
                }
              }, {
                name: '完工数',
                type: 'bar',
                barMaxWidth: 30,
                data: arrActualValue,
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      position: 'top',
                      fontSize: '14',
                      fontWeight: 'bold'
                    },
                    barBorderRadius: [5, 5, 0, 0]
                  }
                }
              }, {
                name: '未完工数',
                type: 'bar',
                barMaxWidth: 30,
                data: arrNotFinish,
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      position: 'top',
                      fontSize: '14',
                      fontWeight: 'bold'
                    },
                    barBorderRadius: [5, 5, 0, 0]
                  }
                }
              }]
            };

            chart.setOption(option);
          }
        });
      };
      GetProductfamilyData();

      //批产月计划执行情况
      function GetPichanMonth() {
        $.ajax({
          type: "POST",
          url: "../handler/board/ZSPichanYear.ashx",
          dataType: "text",
          cashe: false,
          data: {
            type: 'GetMonthData'
          },
          beforeSend: function () {
            echarts.dispose(document.getElementById("pichanMonth"));
            var chart = echarts.init(document.getElementById('pichanMonth'));
            chart.showLoading({
              text: '数据查询中...',
              effect: 'whirling',
              maskColor: 'transparent',
              textColor: '#ffffff'
            });
          },
          success: function (result) {
            var data = JSON.parse(result);

            echarts.dispose(document.getElementById("pichanMonth"));
            var chart = echarts.init(document.getElementById('pichanMonth'));
            chart.hideLoading();

            var arrWorkcentername = [];
            var arrPlanValue = [];
            var arrActualValue = [];
            var arrNotFinish = [];

            for (var i = 0; i < data.length; i++) {
              arrWorkcentername.push(data[i]["PLANMONTH"]);
              arrPlanValue.push(data[i]["PLANQTY"]);
              arrActualValue.push(data[i]["FINISHQTY"]);
              arrNotFinish.push(data[i]["NOTFINISHQTY"]);
            };

            var option = {
              tooltip: {
                trigger: 'axis',
                show: true,
                axisPointer: {
                  type: 'shadow'
                }
              },
              grid: {
                left: '1%',
                right: '1%',
                bottom: '5%',
                containLabel: true
              },
              legend: {
                data: ['计划数', '完工数', '未完工数'],
                x: '10',
                y: '0',
                textStyle: {
                  fontSize: '12',
                  fontWeight: 'bold',
                  color: '#fff'
                }
              },
              color: ['rgb(60,176,244)', 'rgb(0,255,0)', 'rgb(255,0,0)'],
              xAxis: [{
                type: 'category',
                axisTick: {
                  alignWithLabel: true
                },
                axisLine: {
                  lineStyle: {
                    color: '#fff',
                    width: '2'
                  }
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: '#fff',
                    fontSize: '14',
                    fontWeight: 'bold'
                  }
                },
                data: arrWorkcentername
              }],
              yAxis: [{
                type: 'value',
                axisLine: {
                  lineStyle: {
                    color: '#fff',
                    width: '2'
                  }
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: '#fff',
                    fontSize: '14',
                    fontWeight: 'bold'
                  }
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: '#999',
                    type: 'dashed'
                  }
                }
              }],
              series: [{
                name: '计划数',
                type: 'bar',
                barMaxWidth: 30,
                data: arrPlanValue,
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      position: 'top',
                      fontSize: '14',
                      fontWeight: 'bold'
                    },
                    barBorderRadius: [5, 5, 0, 0]
                  }
                }
              }, {
                name: '完工数',
                type: 'bar',
                barMaxWidth: 30,
                data: arrActualValue,
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      position: 'top',
                      fontSize: '14',
                      fontWeight: 'bold'
                    },
                    barBorderRadius: [5, 5, 0, 0]
                  }
                }
              }, {
                name: '未完工数',
                type: 'bar',
                barMaxWidth: 30,
                data: arrNotFinish,
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      position: 'top',
                      fontSize: '14',
                      fontWeight: 'bold'
                    },
                    barBorderRadius: [5, 5, 0, 0]
                  }
                }
              }]
            };

            chart.setOption(option);
          }
        });
      };
      GetPichanMonth();
    });
  </script>
</body>

</html>